import React, { useEffect, useState } from 'react';
import { PageHeaderWrapper } from '@ant-design/pro-layout';
import MailHeader from './components/MailHeader';
import MailList from './components/MailList';
import Footer from '@/components/Footer';
import { Alert } from 'antd';
import setleIndex from '@/pages/index.less';

export default function IndexPage() {
  const [userrole,setUserrole] = useState({
    role: ''
  })
  useEffect(()=>{
    const defaultuserrole: any = localStorage.getItem('user')
    const userrole = JSON.parse(defaultuserrole)
    setUserrole(userrole)
  },[])
  return (
    <div>
      <header>
        <PageHeaderWrapper fixedHeader={true} />
      </header>
      <main className={setleIndex.p20}>
        {
          userrole.role === 'admin' ? '' : <Alert
          message={
            <>
              系统检测到<b>SMTP 配置</b>未完善，当收到评论时，无法进行邮件通知。
              <a
                style={{
                  color: '#000',
                }}
                href="/setting"
              >
                点我立即完善
              </a>
            </>
          }
          type="warning"
        />
        }
        <MailHeader />
        <MailList />
      </main>
      <footer>
        <Footer />
      </footer>
    </div>
  );
}
